<template>
    <!-- <ul class="m-list"> -->
        <van-cell-group class="m-list">
        <!-- <li v-for="(l,i) in films" :key="i" @click.stop="gotofilmdetail(l)"> -->
            <van-cell v-for="(l,i) in films" :key="i" @click.stop="gotofilmdetail(l)" class="m-list-cell">
                <img :src="l.poster" class="l-img" alt="">
                <div class="m-center">
                    <p >
                        <span class="name">
                            {{l.name}}
                        </span>
                        <span class="abbrbox">{{l.item.name}}</span>
                    </p>
                    <p>观众评分 
                        <span style="color:#ffb232;"> {{l.grade}}</span>
                    </p>
                    <p class="van-ellipsis myactior">主演:
                        <span v-for="(actor,i) in l.actors" :key="i">
                            {{actor.name + ' '}}
                        </span>
                    </p>
                    <p>
                        <span> {{l.nation}}</span>
                        |
                        <span>{{l.runtime }}分钟</span>
                    </p>
                </div>
                <div>
                    <van-button class="buy-btn" @click.stop="gotocinemadetail(l)">购票</van-button>
                </div>
            </van-cell>
        <!-- </li> -->
        </van-cell-group>
    <!-- </ul> -->
</template>

<script>
export default {
    props:['films'],
    methods:{
        gotofilmdetail(l){
            this.$router.push({name:'film',params:{filmId:l.filmId}})
        },
        gotocinemadetail(l){
            this.$router.push({name:'film-cinema',params:{filmId:l.filmId}})
        },
    }
}
</script>


<style lang="scss" scoped>
.van-cell__value{
    display: flex;
}
   .m-list{
        padding: 10px;
        padding-bottom: 50px;
        
        
        .m-list-cell{
            width:100%;
            display: flex;
            margin-bottom:10px;
            align-items: center;
            .l-img{
                width:66px;
                height:95px;
            }
            .m-center{
                padding:0 10px;
                flex:1;
                flex-shrink: 0;  // 不可以被压缩
                display: flex;
                flex-direction: column;
                justify-content: center;
                // align-items: center;
                .name{
                    font-size:18px;
                    color:#191a1b;
                }
                .abbrbox{
                    color: #fff;
                    background-color: #d2d6dc;
                }
                .myactior{
                    width:220px;
                }
                p{
                    color:#797d82;
                }
            }
            .buy-btn{
                width:50px;
                height:25px;
                border: 1px solid #ff5f16;
                color:#ff5f16;
                font-size: 13px;
                text-align: center;
                border-radius: 2px;
                position: relative;
                right: 60px;
                padding:0;
            }
        }
    }
</style>